/*
 * @Author: zyk 997610780@qq.com
 * @Date: 2022-11-01 14:38:25
 * @LastEditors: zyk 997610780@qq.com
 * @LastEditTime: 2022-11-02 14:24:44
 * @FilePath: \fifty-small-projects\50抓害虫小游戏\50.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
let start_btn = document.querySelector('.start_btn')
let screens = document.querySelectorAll('.screen')
let insects_box = document.querySelector('.insects')
let play_time_box = document.querySelector('.play_time')
let score_box = document.querySelector('.score')
let game_site = document.querySelector('.game_site')
// 游戏时间  定时器
let play_timer = null
let play_time = 0
let cur_steps = 1
let select_insect = 0
let insects_list = [
  {
    name: "蚊子",
    image: './image/w.png'
  },
  {
    name: "苍蝇",
    image: './image/c.png'
  },
  {
    name: "蜘蛛",
    image: './image/zz.png'
  },
  {
    name: "蟑螂",
    image: './image/z.png'
  },
]




function screenUp() {
  screens[cur_steps - 1].classList.add('up')
  cur_steps++
}

function initInsects() {
  insects_list.forEach((item, index) => {
    insects_box.appendChild(createdInsect(item.name, item.image, index))
  })
}

function createdInsect(name, image, index) {
  let insects = document.createElement('div')
  insects.classList.add('insects_item')
  insects.innerHTML = `
    <div class="insects_name">${name}</div>
    <img class="insects_img" src="${image}" alt="${name}">
  `
  insects.addEventListener('click', () => {
    select_insect = index
    screenUp()
    startGame()
  })
  return insects
}


initInsects()

start_btn.addEventListener('click', () => {
  screenUp()
})


function startGame() {
  play_timer = setInterval(() => {
    play_time++
    // 分
    let s = play_time % 60
    let m = Math.floor(play_time / 60)
    play_time_box.innerText = `时间：${fillZero(m)}:${fillZero(s)}`
  }, 1000)
  randomCreatedInsect()
}
// 目前昆虫的数量
let count = 1
// 成绩
let score = 0
function randomCreatedInsect() {
  let max_width = window.innerWidth - 100
  let max_height = window.innerHeight - 100
  let insect_box = document.createElement('div')
  insect_box.classList.add('insect_box')
  insect_box.style.left = Math.floor(Math.random() * max_width) + 'px'
  insect_box.style.top = Math.floor(Math.random() * max_height) + 'px'
  let insect = document.createElement('img')
  insect.classList.add('insects_img')
  insect.draggable = false
  insect.src = insects_list[select_insect].image

  insect.style.transform = `scale(${Math.random() * 2}) rotate(${Math.floor(Math.random() * 360)}deg)`
  insect_box.addEventListener('click', addInsect)
  insect_box.appendChild(insect)
  game_site.appendChild(insect_box)
}

function addInsect() {
  countScore()
  this.classList.add('caught')
  setTimeout(() =>{
    count -= 1
    console.log(count,"昆虫的总量2");
    this.remove()
  }, 1100)
  setTimeout(() => {
    count += 1
    console.log(count,"昆虫的总量3");

    randomCreatedInsect()
  }, 1500);
  setTimeout(() => {
    count+=1
    console.log(count,"昆虫的总量1");
    randomCreatedInsect()
  }, 2000);
}

// 统计成绩
function countScore() {
  score++
  score_box.innerText = `数量：${score}`
  if (score > 20) {
    let msg = document.querySelector('.msg')
    msg.classList.add('show')
  }
}

function fillZero(v) {
  return v < 10 ? `0${v}` : v
}
